<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入meta标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bootstrap</title>
    <!-- 引入css -->
    <link rel="stylesheet" href="file:\\D:\H5全栈\安装包\bootstrap-4.5.0-dist\css\bootstrap.min.css">
    <!-- 引入jquery.min.js -->
    <script type="text/javascript" src="file:\\D:\H5全栈\安装包\jquery-3.5.0\jquery-3.5.0.min.js"></script>
    <!-- 引入bootstrap.min.js -->
    <script type="text/javascript" src="filed:\\D:\H5全栈\安装包\bootstrap-4.5.0-dist\js\bootstrap.min.js"></script>
    <!-- 设置自定义样式 -->
    <style>
        div.container{
            height: 200px;
            background-color: #ccc;
        }
        div.row{
            height: 200px;
        }
        div.row div{
            border: 1px solid red;
            height: 100px;
        }
        section{
            width: 300px;
            height: 300px;
            /* background: linear-gradient(to left,red 30%,blue 60%,orange); */
            background: radial-gradient(circle,red,blue,orange);
        }
    </style>
</head>
<body>
    <section>

    </section>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="..." class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="..." class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="..." class="d-block w-100" alt="...">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    <div class="container">
        <div class="alert alert-primary" role="alert">
            A simple primary alert—check it out!
        </div>
        <div class="row align-items-center">
            <div class="col-xl-1 col-1 bg-light offset-xl-1"></div>
            <div class="col-xl-5 col-6 bg-light offset-xl-1"></div>
            <div class="col-xl-4 col-5 bg-light" ></div>
        </div>
    </div>
    <table class="table table-striped">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
</body>
</html>